<template>
	<div class="not-found">
		<div class="not-found-illustration"></div>
		<div class="not-found-text">
			{{$t('message.notFound')}}
		</div>
		<div class="not-found-tip">
			{{$t('message.canNotFound')}}
		</div>
		<div class="not-found-btn">
			<button type="button" @click="toHome">{{$t('message.backHome')}}</button>
		</div>
	</div>
</template>

<script>
export default {
  data () {
    return {
      totalTime: 3,
      time: 0
    }
  },
  methods: {
    toHome () {
      this.$router.push({ path: '/' })
    }
  },
  activated () {
  },
  deactivated () {
    clearInterval(this.interval)
  }
}
</script>

<style scoped>
.not-found {
	width: 600px;
	margin: 0 auto;
	padding: 100px 0 117px;
}

.not-found-illustration {
	width: 600px;
	height: 450px;
	background: url(../assets/images/illustration_404.png) no-repeat center;
}

.not-found-text {
	height: 33px;
	line-height: 33px;
	font-size: 24px;
	color: #333;
	text-align: center;
}

.not-found-tip {
	height: 20px;
	line-height: 20px;
	font-size: 14px;
	color: #666;
	text-align: center;
	margin-top: 16px;
}

.not-found-btn {
	margin-top: 40px;
	text-align: center;
}

.not-found-btn button {
	height: 46px;
	padding: 0 30px;
	border: 0;
	background-color: #ff600a;
	color: #fff;
	cursor: pointer;
}

.not-found-btn button:hover {
	background-color: #ff3c00;
}

.not-found-btn button:active {
	background-color: #e83700;
}
</style>